<template>
    <div>
        <div class="head">
            <div class="head-l">
                <p class="p1">{{isAgent}}</p>
                <p class="p2">{{area}}</p>
                <p class="p3">合伙人可以绑定多系统并收到多系统返利，但只能 在首次登录的系统中进行推广。</p>
            </div>
            <div class="head-r">
                <p class="p2">{{userInfo.nickname}}</p>
                <p class="p2">{{overtime}}到期</p>
            </div>
        </div>
        <p class="p7">{{systemname}}|卡包</p>
        <div class="main" v-for="(item,index) in list" :key="index">
            <div class="line-10"></div>
            <div class="item" @click="interplanetary(item)">
                <div class="item-t">
                    <img class="ste" :src="item.pic">
                    <div class="item-tr">
                        <p class="p1">{{item.systemname}}</p>
                        <p class="p2">{{item.nickname || '还没有绑定账号'}} ID：{{item.uid}}</p>
                    </div>
                </div>
                <div class="item-b">
                    <p class="p1">账户余额：{{item.money || 0 }}元</p>
                    <p class="p2">详情</p>
                </div>
            </div>
        </div>
    </div>
</template>
<div>
</div>
<script>
    import API from '../../request/api';
    import {commonMixin} from '@/common/mixin';
    import {baseUrl} from "../../config";

    export default {
        /**
         *卡包
         */
        name: "cardBag",
        mixins: [commonMixin],
        data() {
            return {
                list: {},
                isagent: 0,
                isAgent: '',
                area: '',
                overtime: '',
                systemname: ''
            };
        },
        created() {
            this.showGlobaLoading();
            this.request.get(API.cardBag).then((res) => {
                this.list = res.list;
                this.isagent = res.isagent;
                this.area = res.area;
                this.systemname = res.systemname;
                this.overtime = res.overtime;
                this.hideGlobaLoading();
            });
        },
        watch: {
            isagent() {
                if (this.isagent === 1) {
                    this.isAgent = '合伙人';
                } else if (this.isagent === 0) {
                    this.area = '';
                }
            }
        },
        methods: {
            interplanetary(system) {
                //    跳转系统
                if (system.token) {
                    window.location.href = `https://${document.domain}/welcome?system=${system.system}&token=${system.token.access_token}&token_type=1`;
                } else {
                    window.location.href = `https://${document.domain}/welcome?system=${system.system}`;
                }

            }
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .head {
        width 100%
        height vw(133)
        padding cellPadding
        box-sizing border-box
        flex-x(, stretch)
        background main-liner
        .head-l {
            flex 1
            flex-y(center, flex-start)
            .p1 {
                word-vw(25px, white)
                line-height 1.4
            }
            .p2 {
                word-vw(12px, white)
                line-height 2
            }
            .p3 {
                word-vw(10px, white)
                line-height 1.2
            }
        }
        .head-r {
            flex-y(center, flex-end)
            .p2 {
                word-vw(12px, white)
                line-height 1.4
            }
        }
    }

    .p7 {
        background white
        padding 0 cellPadding
        word-vw(12px, gray3)
        line-height vw(28)
    }

    .main {
        flex-y()
        padding 0 vw(5)
        .item {
            background main-color
            border-radius main-radius
            width 100%
            height vw(102)
            padding 0 vw(10)
            box-sizing border-box
            .item-t {
                flex-x(flex-start)
                height vw(69)
                .ste {
                    width vw(33)
                    height vw(33)
                    border-radius vw(5)
                }
                .item-tr {
                    flex-y(, flex-start)
                    padding-left 3vw
                    .p1 {
                        word-vw(14px, white)
                        line-height 1.6
                    }
                    .p2 {
                        word-vw(10px, white)
                        line-height 1.2
                    }
                }
            }
            .item-b {
                flex-x()
                height vw(33)
                .p1 {
                    word-vw(10px, white)
                }
                .p2 {
                    word-vw(12px, white)
                    line-height 2
                }
            }
        }
    }
</style>
